{% extends webapp_config['LAYOUT'] %}

{% block meta_copydoc %}{% endblock %}

{% block meta_title %}Install {{ snap_title }} on {{ distro_name }} using the Snap Store | Snapcraft{% endblock %}

{% block meta_description %}Get the latest version of {{ snap_title }} for on {{ distro_name }} - {{ summary }}{% endblock %}

{% if icon_url %}
  {% block meta_image %}
    {{ icon_url }}
  {% endblock %}
{% endif %}

{% block meta_schema %}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "{{ snap_title }}",
      "description": "{{ summary }}",
      "datePublished": "{{ last_updated_raw }}",
      {% if screenhots and screenshots|length > 0 %}
      "screenshot": "{{ screenshots[0] }}",
      {% endif %}
      "image": "{{ icon_url }}",
      "operatingSystem": "Linux, {{ distro_name }} ",
      "offers": {
        "price": {% if prices and prices['USD'] %}{{ prices['USD'] }}{% else %}0.00{% endif %},
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Person",
        "name": "{{ publisher }}"
        {% if website %}, {# the , is within the if to avoid parsing errors #}
        "url": "{{ website }}"
        {% endif %}
      },
      "softwareVersion": "{{ version }}",
      "fileSize": "{{ filesize }}",
      "license": "{{ license }}"
    }
  </script>
{% endblock %}

{% block header %}
  {% include "_header_empty.html" %}
{% endblock %}

{% block content %}
  <section class="p-strip--light distro-banner u-no-padding--top">
    <div class="distro-banner__background">
      <svg class="distro-banner__suru" viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="a">
            <stop stop-color="{{ distro_color_1 }}" offset="0%"/>
            <stop stop-color="{{ distro_color_2 }}" offset="100%"/>
          </linearGradient>
        </defs>
        <g fill-rule="nonzero" fill="none">
          <path fill="url(#a)" d="M0 0h1440v700H0z"/>
          <g fill="#FFF">
            <path d="M1440 700V198L808 700z" fill-opacity=".04"/>
            <path d="M0 341v359h1231z" fill-opacity=".06"/>
          </g>
        </g>
      </svg>
    </div>
    <div class="p-strip">
      <div class="row">
        <div class="col-8">
           <h1 class="p-heading--two u-no-margin is-light">How to install {{ snap_title }}<br/> on <b>{{ distro_name }}</b></h1>
        </div>
        {% if distro_logo_mono %}
        <div class="col-4 u-hide--small">
          {{
            image(
              url=distro_logo_mono,
              alt="",
              width="126",
              height="126",
              hi_def=True,
              loading="eager",
              attrs={"class": "distro-banner__logo u-vertically-center"}
            ) | safe
          }}
       </div>
       {% endif %}
      </div>
    </div>

    <div class="row">
      <div class="p-card--highlighted" style="position: relative;">
        <div class="row">
          <div class="details-block">
            <div class="p-snap-heading">
              {% include 'store/snap-details/_snap_heading_data.html' %}

              <div class="p-snap-install-buttons">
                <a class="p-button--neutral p-snap-install-buttons__install js-install" href="#install" data-scroll-to="#install">
                  Install snap
                </a>
              </div>
            </div>
          </div>
        </div>

        {% if screenshots or videos %}
          <div class="details-block">
            {% include "store/snap-details/_screenshots.html" %}
          </div>
        {% endif %}

        <div class="row">
          <div class="col-8 js-snap-description-text">
            {% if summary %}<h4 data-live="summary">{{ summary }}</h4>{% endif %}
            <div data-live="description">{{ description | safe }}</div>
          </div>
          <div class="col-4">
            <div class="js-snap-description-details">
              {% include "store/snap-details/_details.html" %}
            </div>
          </div>
        </div>

        <div class="snap-description-more u-hide">
          <a href="/{{ package_name }}" class="js-show-more-description">Show more</a>
        </div>
      </div>

      <div id="install" class="p-card--highlighted">
        <div class="row">
          <div class="col-10">
          <h2>Enable snaps on {{ distro_name }} and install {{snap_title}}</h2>
          <p>Snaps are applications packaged with all their dependencies to run on all popular Linux distributions from a single build. They update automatically and roll back gracefully.</p>
          <p>Snaps are discoverable and installable from the <a href="/store">Snap Store</a>, an app store with an audience of millions.</p>
          </div>
          <div class="u-hide--small col-2">
            {{
              image(
                url=distro_logo,
                alt="",
                width="169",
                height="159",
                hi_def=True,
              ) | safe
            }}
          </div>
        </div>
        <div class="row">
          <h3>Enable snapd</h3>
        </div>
        {% for step in distro_install_steps %}
          <div class="row">
            <div class="col-7">
              <p>{{ step.action|safe }}</p>
            </div>
            {% if step.command %}
              <div class="col-5 distro-code-snippet">
                {% set snippet_value = step.command %}
                {% set snippet_id = "distro-install-command-" + loop.index|string %}
                {% if (step.command|trim).count('\n') == 0 %}
                  {% include "/partials/_code-snippet.html" %}
                {% else %}
                  {% include "/partials/_code-snippet-multi.html" %}
                {% endif %}
              </div>
            {% endif %}
          </div>
        {% endfor %}
        <div class="row">
          <h3>Install {{ snap_title }}</h3>
        </div>
        <div class="row">
          <div class="col-7">
            <p>To install {{ snap_title }}, simply use the following command:</p>
          </div>
          <div class="col-5 distro-code-snippet">
            {% set snippet_value =
                install_snippet(
                  package_name,
                  default_track,
                  lowest_risk_available,
                  confinement) %}
            {% set snippet_id =  "snap-install-stable" %}
            {% include "/partials/_code-snippet.html" %}
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-strip is-shallow">
    <div class="u-fixed-width u-clearfix">
      <h3 class="u-float-left">Other popular snaps…</h3>
      <a href="/search?category=featured" class="p-button--neutral u-float-right u-hide--small p-featured-snap__see-more">See more...</a>
    </div>
    <div class="row">
        {% set show_summary = True %}
        {% for snap in featured_snaps %}
          <div class="col-4">
            {% set icon_size = "large" %}
            {% include "store/_media-object-snap-partial.html" %}
          </div>
        {% endfor %}
    </div>
    <div class="row u-hide--medium u-hide--large">
      <a href="/search?category=featured" class="p-button--neutral u-float-right">See more in Featured</a>
    </div>
  </section>
  <section class="p-strip is-shallow">
    <div class="row">
      <h3 class="u-float-left">More things to do…</h3>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="p-card--highlighted">
          <a href="/snap-store">            
            {{
              image(
                url="https://assets.ubuntu.com/v1/2b48f98d-distro_img_01.svg",
                alt="",
                width="567",
                height="228",
                hi_def=True,
              ) | safe
            }}
          </a>
          <h4 class="p-card__title">
            <a href="/snap-store">Get the snap store</a>
          </h4>
          <p class="p-card__content">Browse and find snaps from the convenience of your desktop using the snap store snap.</p>
        </div>
      </div>
      <div class="col-6">
        <div class="p-card--highlighted">
          <a href="/docs">
            {{
              image(
                url="https://assets.ubuntu.com/v1/8d00f749-distro_img_02.svg",
                alt="",
                width="567",
                height="228",
                hi_def=True,
              ) | safe
            }}
          </a>
          <h4 class="p-card__title">
            <a href="/docs">Learn more about snaps</a>
          </h4>
          <p class="p-card__content">Interested to find out more about snaps? Want to publish your own application? Visit <a href="/">snapcraft.io</a> now.</p>
        </div>
      </div>
    </div>
  </section>

  {% include "store/snap-details/_templates.html" %}
{% endblock %}

{% block scripts_modules %}
  <script src="{{ static_url('js/modules/clipboard.min.js') }}" defer></script>
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}
{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        try {
          snapcraft.public.initLinkScroll(document.querySelector(".js-install"), { offset: 20 });
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.triggerEventWhenVisible("#snippet-snap-install-stable")
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.initExpandableSnapDetails();
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.screenshots('#js-snap-screenshots');
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.videos('.js-video-slide');
        } catch(e) {
          Raven.captureException(e);
        }

        if (typeof ClipboardJS !== 'undefined') {
          new ClipboardJS('.js-clipboard-copy');
        }
      });
    });
  </script>
{% endblock %}
